<template>
    <el-form
      ref="ruleFormRef"
      :model="form"
      label-width="90px"
      class="ruleForm"
      label-position="left"
      status-icon
    >
      <el-form-item label="标题">{{ form.title }} </el-form-item>
      <el-form-item label="发布时间"> {{ form.publishTime }}</el-form-item>
      <el-form-item label="素材"> </el-form-item>
      <MaterialTable
        type="detail"
        style="margin-bottom: 20px"
        :tableData="form.materialDtoList"
      ></MaterialTable>
      <el-form-item label="发送对象"> {{ form.publishToName }}</el-form-item>
      <FriendsTable :id="(id as string)"></FriendsTable>
      <GroupTable :id="(id as string)"></GroupTable>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import MaterialTable from '../infoSetting/components/MaterialTable.vue'
  import FriendsTable from './components/FriendsTable.vue'
  import GroupTable from './components/GroupTable.vue'
  import { contentManagementService } from '@/api/contentManagement'
  const route = useRoute()
  
  const form = ref({
    title: '',
    publishTime: '',
    publishToName: '',
    materialDtoList: [],
  })
  const id = route.query.id
  const getDetail = () => {
    contentManagementService
      .publishMessageDetail({
        data: route.query.id,
      })
      .then((res) => {
        form.value = res.data
      })
  }
  onMounted(() => {
    getDetail()
  })
  </script>
  
  <style lang="scss" scoped>
  .ruleForm {
    padding: 16px 20px;
  }
  </style>
  